<template>
  <div id="TypeContainer">
    <div class="top">
        <span v-for="(item,index) in topLists" :key="index" @click="border_active(index);setTopIndex(index)">
            {{item}}
        </span>
    </div>
    <div class="border_bottom">
        <div class="progress"></div>
    </div>
    <div class="body">
        <ul v-show="topIndex==0">
            <li v-for="index in 4" :key="index">
                <img :src="classificationImgs[index-1]" alt="">
                <div>{{classificationLists[index-1]}}</div>
            </li>
        </ul>
        <ul v-show="topIndex==1">
            <li v-for="index in 4" :key="index">
                <img :src="lableimgs[index-1]" alt="">
                <div>{{lableLists[index-1]}}</div>
            </li>
        </ul>
    </div>
  </div>
</template>

<script>
export default {
    name: "TypeContainer",
    data() {
        return {
            topIndex: 0,
            topLists: ['分类','标签'],
            classificationLists : ['前端','后端','数据库','算法'],
            classificationImgs: ['http://pic.aasee.com.cn/cf574094-1462-4ad2-8d3d-702aed89599d.jpg',
                                 'http://pic.aasee.com.cn/19ca9df9-1c78-40f7-9398-a484ec13aa43.jpg',
                                 'http://pic.aasee.com.cn/c6f37027-6885-41ef-a790-a7cb2a1e9f5e.jpg',
                                 'http://pic.aasee.com.cn/a573b854-53f6-4d25-bd94-29dd0ec75216.png'],
            lableLists: ['spring boot','spring','spring mvc','redis','mysql'],
            lableimgs: ['http://pic.aasee.com.cn/bc063064-8cc3-4681-80d3-a6b8d4363d34.jpg',
                        'https://img1.baidu.com/it/u=118444678,1833425892&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=279',
                        'http://pic.aasee.com.cn/34152871-7742-489f-a8e8-2bfce3e78b9a.webp',
                        'http://pic.aasee.com.cn/3304ba5f-66b4-410d-b94c-ad925b5bf890.jpg']
        }
    },
    methods: {
        border_active(index) {
            let process = document.querySelector('.progress');
            if(index>0)          
                process.style.left = index*70+'px';
            else 
                process.style.left = index*50+'px';
        },
        setTopIndex(index) {
            this.topIndex = index;
        }
    }
}
</script>

<style scoped>
#TypeContainer {
    padding: 20px;
    width: 60vw;
    margin-top: 50px;
    height: 500px;
    /* background-color: #fff; */
    border-radius: 10px;
    overflow: hidden;
}

.top span{
    display: inline-block;
    padding: 10px;
    margin-right: 20px;
    font-size: 15px;
    cursor: pointer;
    width: 30px;
    text-align: center;
}

.top span:hover {
    color: #409eff;
}

.border_bottom {
    position: relative;
    height: 2px;
    background-color: #e4e7ed;
    width: 100%;
}

.progress {
    position: absolute;
    height: 2px;
    top: 0;
    left: 0;
    background-color: #409eff;
    width: 50px;
    transition: all .2s ease;
}

.body {
    width: 100%;
    margin-top: 20px;
}

.body ul {
    flex-wrap: wrap;
    display: flex;
    justify-content: space-between;
}

.body li {
    display: inline-block;
    width: 20%;
    height: 300px;
    margin: 10px 10px;
    background-color: #fff;
    border-radius: 10px;
    cursor: pointer;
}


.body li img {
    width: 100%;
    height: 70%;
}

.body li>div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30%;
    font-size: 20px;
}

.body li:hover{
    color: #5fb878;
}
</style>